import axios from '../../services';
import React, { memo, useEffect, useState,useRef } from 'react';
import { Button, Search, Toast } from 'react-vant';
import { DeleteO } from '@react-vant/icons';
import BottomSearch from './BottomSearch';
 function SearchPopup (props) {
    const [value, setValue] = useState('');
    const [data, setData] = useState({})
    const [mode,setMode] = useState(1)
    const [timer,setTimer] = useState(null)
    const [transitionValue,setTransitionValue] = useState('')
    const [plho,setPlho] = useState('')
    const inp1 = useRef(null)
    useEffect(() => {
        axios.get('/search/index').then(res => {
            setData(res.data)
            //set the focus when we enter the search page
            // setTimeout(()=>{inp1.current.focus()},1)
        })
        
    }, [])
    return (
        (JSON.stringify(data) === '{}') ?
            null : <div>
                <Search
                    value={value}
                    onChange={(e)=>{
                        setValue(e)
                        //we can't use closure function in the components
                        clearTimeout(timer)
                        setTimer(setTimeout(
                            ()=>{
                                setTransitionValue(e)
                            }
                        ,1000))
                    }}
                    placeholder={plho}
                    showAction
                    onSearch={(val) => {
                        Toast(val);
                        setValue(val);
                        setMode(3)
                    }}
                    onCancel={() => {
                        props.history.push('/home')
                    }}
                    onClear={() => {
                        setValue('');
                    }}
                    onClickInput={() => {
                        Toast('点击输入区域时触发');
                        setMode(2)
                    }}
                    ref={inp1}
                />
                <BottomSearch mode={mode} history={props.history} setValueAno={setValue} setValue={setTransitionValue} value={transitionValue} setMode={setMode} setPlho={setPlho}  />
            </div>)
}

export default memo(SearchPopup)